<template>
    <div class="m-change">
        <el-row>
            <el-col :span="12">
                <div class="change-province">
                    <span>按省份搜索：</span>
                    <el-select v-model="pro" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in province"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                    <el-select v-model="citys" placeholder="请选择">
                        <el-option
                        v-for="(item,index) in city"
                        :key="index"
                        :label="item"
                        :value="item">
                        </el-option>
                    </el-select>
                </div>   
            </el-col>
            <el-col :span="12">
                <div class="search-city">
                    <span>直接搜索：</span>
                    <el-autocomplete
                        class="inline-input"
                        v-model="state2"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        :trigger-on-focus="false"
                    ></el-autocomplete>
                </div>
            </el-col>
        </el-row>       
    </div>
</template>

<script>
export default{
    data(){
        return{
            pro: '',
            citys: '',
            state2: '',
            restaurants: [
                {
                    value: '三全鲜食（北新泾店）',
                    address: '长宁区新渔路144号'
                },
                {
                    value: 'Hot honey 首尔炸鸡（仙霞路）',
                    address: '上海市长宁区淞虹路661号'
                },
                {
                    value: '新旺角茶餐厅',
                    address: '上海市普陀区真北路988号创邑金沙谷6号楼113'
                },
                {
                    value: '泷千家(天山西路店)',
                    address: '天山西路438号'
                },
                {
                    value: '胖仙女纸杯蛋糕（上海凌空店）',
                    address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101'
                }
            ],
            province:['北京','天津','上海','广州','深圳','河北省','黑龙江省'],
            city:['北京','天津','上海','广州','深圳','河北省','黑龙江省']    
        }
    },
    methods:{
        querySearch(queryString, cb){
            let restaurants = this.restaurants;
            let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        createFilter(queryString){
            return(restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        }
    }
}
</script>